 <!--新增行表格-->
 <template>
    <div class='tableEdit' :style="heights">
        
        <el-button type="warning" style='margin-bottom:10px;width:80px' @click="addRow" v-if="isAdds!='N'&&isreadonlys!='Y'">新增行</el-button>
        <el-table
            :data="data[dataField]"
            class='tablesss'
            height="100%"
            border
            style="width: 100%;">
            <el-table-column
               v-for="(item,index) in listField" :key="index"
                :label="item.label"
               :width='item.width.replace("width:","")' >
                 <template slot-scope="scope"> 
                    <input-card-button :id="item.id" :isreadonly="item.isReadOnly" :extype="item.extype" :exkey="item.exkey"  :data="data"  @input="tableChangeData" :expost="item.expost"   :index="scope.$index"  v-if="item.type=='inputCardButton'"></input-card-button>
                       
                    <input-noborder :id="item.id" :dataField="dataField" ref="inputs" :data="data" :exdata="scope.$index" :extype="item.extype" :exkey="item.exkey" @input="tableChangeData"  :isreadonly="item.isReadOnly"  v-if="item.type=='text'"></input-noborder>
                    <input-select :id="item.id" :valsql="item.valsql" :sign="item.sign" :time="item.time" isBorder="N" :dataField="dataField" styles="width:100%" :options="item.dataSource" :index="scope.$index" :exkey="item.exkey" :selectData="selectData" :data="data"  @input="tableChangeData" :isreadonly="item.isReadOnly" v-if="item.type=='select'" ></input-select>
                    <input-number :id="item.id" :dataField="dataField" ref="inputs" :data="data" :exdata="scope.$index" :extype="item.extype" :exkey="item.exkey" @input="tableChangeData"  :isreadonly="item.isReadOnly"  v-if="item.type=='number'"></input-number>
                    
                    <!--input-select :attribute="item"  isBorder="N" :dataField="dataField"  :index="scope.$index"  :data="data"  @input="tableChangeData" v-if="item.type=='select'" ></input-select-->
                       
                    <input-date :id="item.id"  isBorder="N"  :dataField="dataField"  styles="width:100%"  :index="scope.$index"  :data="data"  @input="tableChangeData" v-if="item.type=='date'"  :extype="item.extype" :exkey="item.exkey"></input-date>
                    <input-datetime :id="item.id"  isBorder="N"  :dataField="dataField"  styles="width:100%"  :index="scope.$index"  :data="data"  @input="tableChangeData" v-if="item.type=='datetime'"></input-datetime>
                    <city-select :id="item.id" :dataField="dataField" ref="inputs" :data="data" :exdata="scope.$index" :index="scope.$index" :extype="item.extype" :exkey="item.exkey" @input="tableChangeData"  :isreadonly="item.isReadOnly"  v-if="item.type=='cityselect'"></city-select>
                    <city-select :id="item.id" :dataField="dataField" ref="inputs" :data="data" :exdata="scope.$index" :index="scope.$index" :extype="item.extype" :exkey="item.exkey" @input="tableChangeData"  :isreadonly="item.isReadOnly" isjs="Y"  v-if="item.type=='cityselectjs'"></city-select>
                    <image-view-list :id="item.id" :dataField="dataField" ref="inputs" :data="data" :exdata="scope.$index" :index="scope.$index" :extype="item.extype" :exkey="item.exkey" @input="tableChangeData"  :isreadonly="item.isReadOnly"   v-if="item.type=='imageViewList'"></image-view-list>
                   
                </template>
            </el-table-column>
           <el-table-column
            label="删除"
            width="60"
            v-if="isDel!='N'"
           >
               <template slot-scope="scope" >
                   <el-tooltip content="点击删除该服务项目" placement="top" v-if="scope.row.isnotdel!='Y'">
                    <i class='fa fa-times' style='cursor:pointer' @click="removeItem(scope.$index)" ></i>
                    </el-tooltip>
                   
               </template>
            </el-table-column>
        </el-table>
        <!--table cellspacing=0 cellpadding=0>
            <colgroup>
                <col v-for="(item,index) in listField" :key="index" :style='item.width'/>
                <col style='width:40px'/>
            </colgroup>
            <tr>
                <th v-for="(item,index) in listField" :key="index">
                    {{item.label}}
                </th>
                <th></th>
            </tr>
            <tr v-for="(item,index) in data[dataField]" :key="index">
                <td v-for="(field,index2) in listField" :key="index2">
                    <input-noborder :id="field.id" :dataField="dataField" :data="data" :exdata="index" @input="tableChangeData"  :isreadonly="field.isReadOnly"  v-if="field.type=='text'"></input-noborder>
                    <input-select :id="field.id" :dataField="dataField" isBorder='N'  styles="width:100%" :options="field.dataSource" :index="index"   :data="data"  @input="tableChangeData" :isreadonly="field.isReadOnly" v-if="field.type=='select'" ></input-select>
                    <input-date :id="field.id"   :dataField="dataField" isBorder='N'  styles="width:100%"  :index="index"  :data="data"  @input="tableChangeData" v-if="field.type=='date'"></input-date>

                </td>
                <td style='text-align:center;color:red'><i class='fa fa-times' style='cursor:pointer' @click="removeItem(index)"></i></td>
            </tr>
            
        </table-->
    </div>
    
</template>
<script>

import inputNoborder  from '../input/input-noborder'
import inputSelect from '../input/input-select'
import inputDate from '../input/input-date'
import inputDatetime from '../input/input-datetime'
import InputCardButton  from '../input/input-card-button'
import InputNumber  from '../input/input-number'
import ImageViewList  from '../image/ImageViewList'
import citySelect  from '../input/city-select'
export default {
    props:['dataField','listField','data','heights','isAdd','isDel','selectData','exkey'],
    name: "table-edit2",
    components: {
       inputNoborder,
       inputSelect,
       inputDate,
       inputDatetime,
       InputCardButton,
       citySelect,
       ImageViewList,
       InputNumber
       
    },
    data(){
        return{
           
            isAdds:"",
            colors:{},
            changeNum:"",
            changeOldNum:"",
            isreadonlys:"N"
        }
    },
    created(){
        if(sessionStorage.getItem("commonEdit")){
            this.$set(this.data,this.dataField,JSON.parse(sessionStorage.getItem("commonEdit")));
        } 
        
        try{
            if(this.exkey&&this.exkey.colors){
                this.colors=this.exkey.colors;
            }
        }catch(e){}
        try{
            if(this.exkey&&this.exkey.isAdd){
                this.isAdds=this.exkey.isAdd
            }else{
                this.isAdds=this.isAdd
            }
        }catch(e){}
        console.log(this.exkey,"this.exkeys=-======")
        try{
            if(this.exkey&&this.exkey.changeNum){
                this.changeNum=this.exkey.changeNum;
                let ids=this.changeNum.split(".");
                this.changeOldNum=this.data[ids[0]][ids[1]]
                if(this.changeOldNum.indexOf("单")!=-1){
                    this.changeOldNum="1";
                    this.isAdds="N"
                }else if(this.changeOldNum.indexOf("双")!=-1){
                    this.changeOldNum="2";
                    this.isAdds="N"
                }else if(this.changeOldNum.indexOf("多")!=-1||this.changeOldNum.indexOf("家族")!=-1){
                    this.changeOldNum="0";
                    this.isAdds="Y"
                }
            }
        }catch(e){}

        try{
                if(this.exkey.readonlys){
                    let isReadonly_="Y"
                    for(let i=0;i<this.exkey.readonlys.length;i++){
                        let ids=this.exkey.readonlys[i].id.split(".");
                        
                        let opr=this.exkey.readonlys[i].opr;
                        let vals=this.exkey.readonlys[i].val;
                        let val_="";
                        if(ids[0]=="本身"){
                            val_=this.currentValue;
                        }else{
                            if(ids.length==2)
                                val_=this.data[ids[0]][ids[1]];
                            else
                                val_=this.data[this.pId][ids[0]]
                        }
                        if(val_==undefined){
                            val_="";
                        }
                        //console.log("vals==="+vals+"=="+val_+"=="+opr+"=="+ids[0]+"=="+this.currentValue)
                        if(opr=="等于"&&vals!=val_){
                            //this.isreadonlys="Y";
                            isReadonly_="N"
                        }
                        if(opr=="不等于"&&vals==val_){
                            //this.isreadonlys="Y";
                            isReadonly_="N"
                        }

                    }
                    this.isreadonlys=isReadonly_;
                }
            }catch(e){}
    }, 
    methods:{
        addRow(){
            let datas={};
            
            //console.log(this.listField,"this.listField====================")
            for(let i=0;i<this.listField.length;i++){
                let id=this.listField[i].id;
                if(id.indexOf("|")!=-1){
                    let ids=id.split("|");
                    let id_=ids[ids.length-1].replace("id:","")
                    let ids_=id_.split(".");

                    id=ids_[ids_.length-1];
                }
                datas[id]='';
            }
            if(this.data[this.dataField+"_empty"]){
                datas={};
                datas=JSON.parse(JSON.stringify(this.data[this.dataField+"_empty"]))
               
            
            }
            console.log("data=ssssssssssssssssssss==")
            console.log(this.data[this.dataField+"_empty"]);
            console.log(datas)
            this.$set(this.data[this.dataField],this.data[this.dataField].length,datas);
        },
        removeItem(index){
            let items=JSON.stringify(this.data[this.dataField][index]);

            this.$delete(this.data[this.dataField],index);
           /* let data={};
            data.pre=this.dataField;
            data.exdata=index;

            this.tableDataNew.splice(index,1);
            this.changeTotalAmt();
            this.$emit("remove",JSON.stringify(data));*/

            this.$emit("removeItem",items);

        },
        changeAmt(exdata){
            let exkey="";
            let extype="";
            let num=0;
            let amt=0;
            let total_amt=0;
            let total_amt_key="";
            for(let i=0;i<this.listField.length;i++){
                let _id=this.listField[i].id;
                let exkey_=this.listField[i].exkey;
                let extype_=this.listField[i].extype;
                if(exkey_){
                    exkey=exkey_;
                }
                if(extype_=="num"){
                    num=this.data[this.dataField][exdata][_id];
                }else if(extype_=="amt"){
                    amt=this.data[this.dataField][exdata][_id];
                }else if(extype_=="total_amt")
                    total_amt_key=_id;
            }
            if(total_amt_key){
                total_amt=num*amt;

                let data_=this.data[this.dataField][exdata];
                data_[total_amt_key]=total_amt;
                this.$set(this.data[this.dataField],exdata,data_);
               //this.setData(exdata,total_amt_key,total_amt);
            }

            total_amt=0;
            for(let i=0;i<this.data[this.dataField].length;i++){
                total_amt+=Number(this.data[this.dataField][i][total_amt_key])
            }
            if(exkey){
                /*let data_={};
                let ids=exkey.split(".");
                let p=ids[0];
                let id_=ids[1];
                data_.pre=p;
                data_.val=total_amt;
                data_.id=id_;*/
                //this.$emit("input",JSON.stringify(data_));

                this.$set(this.data[p],id_,total_amt);

            }
        },
        tableChangeData(data){
            let datas=JSON.parse(data);
            let id=datas.id;
            let val=datas.val;
            let exdata=datas.exdata;
            let index=datas.index;
            if(exdata==undefined||exdata=="undefined"){
                datas.exdata=index;
                exdata=index;
            }
            let data_=this.data[this.dataField][exdata];

            data_[id]=val;
            this.$set(this.data[this.dataField],exdata,data_)
           
            this.changeAmt(exdata);

           /* let data_={};
            data_.pre=this.dataField;
            data_.val=JSON.stringify(this.tableDataNew[exdata]);
            data_.exdata=exdata;
            this.$emit("input",JSON.stringify(data_));*/
        },
        addItem(data){
            let data_=JSON.parse(data);
           /* let data__={};
            data__.pre=this.dataField;
            data__.val=data;
            data__.exdata=this.tableDataNew.length;*/


            let isOk=true;
            for(let i=0;i<this.data[this.dataField].length;i++){
                let keys=this.data[this.dataField][i].keys;
                let keys_=data_.keys;
                if(keys==keys_&&keys)
                    isOk=false;
            }
            if(isOk){
                this.$set(this.data[this.dataField],this.data[this.dataField].length,data_);
                
                
                //this.tableDataNew.push(data_);
                this.changeAmt(this.data[this.dataField].length-1);
               // this.$emit("input",JSON.stringify(data__));
            }
                

        },
        getData(){
            return this.data[this.dataField];
        },
        setData(exdata,id,val){
           /* let data_=this.data[this.dataField][exdata];
            data_[id]=val;

            this.$set(this.data[this.dataField],exdata,data_);

           // this.tableDataNew[exdata][id]=val;
            let els=this.$refs.inputs;
            for(let i=0;i<els.length;i++){
                els[i].setData(exdata,id,val);
            }*/
            
        },
        validate(){
         
           let rules={};
           let resultMsg="";
           for(let i=0;i<this.listField.length;i++){
               let required=this.listField[i].required;
               let msg=this.listField[i].msg;
               let label=this.listField[i].label;
               let id=this.listField[i].id;

               
               if(required=="true"){
                   msg=msg=="" ? label+"不能为空":msg;
                   rules[id]=msg;
               }
           }

           for(let i=0;i<this.data[this.dataField].length;i++){
               let item=this.data[this.dataField][i];
               for(let key in rules){
                   let val=item[key];
                   if(!val){
                       resultMsg="第"+(i+1)+"行"+rules[key];
                       break;
                   }
               }
           }
           return resultMsg;
        }

    },
    watch:{
         tableData:{
            handler: function (newVal) {
                if(!this.data){
                    //this.tableDataNew=newVal;
                }
                
            },      
            deep: true    //深度监听
        },
        data:{
            handler:function(newVal){
                let datas=this.data[this.dataField]
                if(this.colors){
                    for(let i=0;i<datas.length;i++){
                        for(let key in this.colors){
                            let val=datas[i][key];
                            let type=this.colors[key].type;
                            let color=this.colors[key].color
                            let isOk=true;
                            if(type=="最大"||type=="最小"){
                                if(datas.length>1){
                                    for(let j=0;j<datas.length;j++){
                                        if(j!=i){
                                            let val_=datas[j][key];
                                            if(val_){
                                                if(Number(val_)>Number(val)&&type=="最大"){
                                                    isOk=false;
                                                    break;
                                                }
                                                if(Number(val_)<Number(val)&&type=="最小"){
                                                    isOk=false;
                                                    break;
                                                }
                                            }
                                            
                                        }
                                    }
                                }else{
                                    isOk=false;
                                }
                                
                            }
                            if(isOk){
                                datas[i].color_val=color;
                            }else{
                                datas[i].color_val="";
                            }
                        }
                    }

                    console.log(this.data[this.dataField],"colors========================")
                }
                console.log(this.changeNum,"this.changeNum=================================")
                if(this.changeNum){
                    let ids=this.changeNum.split(".");
                    let num=this.data[ids[0]][ids[1]]

                    if(num.indexOf("单")!=-1){
                        num="1";
                        this.isAdds="N"
                    }else if(num.indexOf("双")!=-1){
                        num="2";
                        this.isAdds="N"
                    }else if(num.indexOf("多")!=-1||num.indexOf("家族")!=-1){
                        num="0";
                        this.isAdds="Y"
                    }
                    if(num!=this.changeOldNum&&num!="0"){
                        this.changeOldNum=num;
                        num=Number(num);
                        let cnum=this.data[this.dataField].length;
                        if(cnum>num){
                            let index=cnum-num;
                            for(let i=1;i<=index;i++){
                                this.$delete(this.data[this.dataField],cnum-i);
                            }
                        }else if(cnum<num){
                            let index=num-cnum;
                            console.log(this.data[this.dataField+"_empty"],"temp=============")
                            for(let i=0;i<index;i++){
                                this.$set(this.data[this.dataField],cnum+i,JSON.parse(JSON.stringify(this.data[this.dataField+"_empty"])))
                            }
                        }
                    }
                    

                }
            },
            deep:true
        }
    }
}
</script>
<style scoped>
    table{
        width:100%;
        border-collapse: collapse;
    }
    th{
        border:1px solid #409EFF;
        padding:5px;
        background:#409EFF;
        color:#fff;
        
    }
    td{
        border:1px solid #ddd;
    }
    input{
        border:0;
    }
    .tableEdit{
        
        height:100%;
        display:flex;
        flex-direction: column;
        text-align:left;
    }
    .tablesss{
        flex:1;
    }
</style>